<template>
  <view class="direct_rel">
    <view class="example">
      <!-- 基础表单校验 -->
      <view class="info_con">
        <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
          <uni-forms-item label="标题" required name="name" label-position="left">
            <uni-easyinput v-model="valiFormData.name" placeholder="请输入标题" :inputBorder="false" styles="width:100px" />
          </uni-forms-item>
          <uni-forms-item label="发布内容：" required name="introduction" label-position="top">
            <uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入发布文章的链接" />
            <uni-forms-item label="封面图片" required label-position="top" name="temp">
              <uni-file-picker limit="1" required file-mediatype='image' v-model="valiFormData.photo" @select="select"
                @progress="progress" @success="success" @fail="fail">
              </uni-file-picker>
            </uni-forms-item>
          </uni-forms-item>
          <uni-forms-item label="活动时间" name="datetimesingle" required label-position="left">
            <uni-datetime-picker type="datetime" v-model="valiFormData.datetimesingle" @change="changeLog" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <button type="default" @click="submit('valiForm')">提交</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        img_id: '',
        start: Date.now() - 1000000000,
        end: Date.now() + 1000000000,
        valiFormData: {
          name: '',
          id: '',
          number: '',
          introduction: '',
          photo: [],
          datetimesingle: '',
          temp:''
        },
        // 校验规则
        rules: {
          name: {
            rules: [{
              required: true,
              errorMessage: '标题不能为空'
            }]
          },
          number: {
            rules: [{
              required: true,
              errorMessage: '联系方式不能为空'
            }]
          },
          introduction: {
            rules: [{
              required: true,
              errorMessage: '发布内容不能为空'
            }]
          },
          temp: {
            rules: [{
              required: true,
              errorMessage: '封面不能为空'
            }]
          },
          datetimesingle: {
            rules: [{
                required: true,
                errorMessage: '请选择活动时间'
              },
              {
                minLength: 15,
                maxLength: 20,
                errorMessage: '请选择具体时间'
              }
            ]
          },
        },
      };
    },
    methods: {
      changeLog(e) {
        console.log(this.valiFormData.datetimesingle);
      },
      async select(e) {
        this.valiFormData.temp=''
        console.log('选择文件：', e.tempFilePaths)
        var imgPath = e.tempFilePaths[0]
        var tempToken = uni.getStorageSync('token')
        var img = imgPath
        var type = 2
        uni.uploadFile({
          url: uni.$http.baseUrl + "/img-upload", //接口地址
          header: {
            "Authorization": tempToken,
            "Content-Type": "multipart/form-data"
          }, //请求token
          filePath: imgPath,
          name: 'file',
          formData: {
            type: 2,
          },
          success: (res) => {
            console.log();
            this.img_id = JSON.parse(res.data).data.img_id
            this.valiFormData.temp='1'
          }
        })
      },

      async release() {
        const query = {
          title: this.valiFormData.name,
          content: this.valiFormData.introduction,
          tag: String(uni.getStorageSync('tag')),
          img_ids: String(this.img_id),
          act_time: this.valiFormData.datetimesingle,
        }
        console.log(query);
        const {
          data: res
        } = await uni.$http.post('/news/release', query)
        // if (res.code != 1000) return uni.$showMsg()
        setTimeout(function() {
          uni.showToast({
            title: `发布成功`
          })
        }, 100)
        setTimeout(function() {
          uni.navigateTo({
            url: './../release/release'
          })
        }, 1000)
        console.log(res);
      },

      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },

      // 上传成功
      success(e) {
        console.log('上传成功')
      },

      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      },
      submit(ref) {
        this.$refs[ref].validate().then(res => {
          console.log('success', res);
          this.release()
          uni.hideLoading()
        }).catch(err => {
          console.log('err', err);
        })

      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: rgba(225, 227, 230, 100);
  }

  .direct_rel {
    button {
      background-color: #1684FC;
      color: white;
      width: 70%;
      margin: 0 auto;
    }

    background-color: rgba(225, 227, 230, 100);
    padding-bottom: 15px;

    .info_con {
      margin: 15px auto;
      padding: 15px 0px;
      border-radius: 10px 10px 10px 10px;
      border: 1px solid rgba(187, 187, 187, 100);
      background-color: white;
      width: 313px;
      padding: 0px 20px;

      // padding-top: 19px;
      // padding-right: 20px;
      // padding-left:20px ;
      // padding-bottom: 31px;
      uni-forms {
        .uni-forms-item {
          width: 300px !important;
        }

        .label-text {
          white-space: nowrap;
          font-size: 15px !important;
          color: rgba(51, 51, 51, 100) !important;
        }

        .uni-forms-item__inner {
          padding-bottom: 18px !important;
        }
      }
    }


  }
</style>
